<template>
  <div class="users">
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="序号" align="center">
      </el-table-column>


      <el-table-column prop="phone" label="手机号" align="center">
      </el-table-column>
      <el-table-column prop="banned" label="封禁" align="center">
      </el-table-column>
      <el-table-column prop="registertime" label="注册时间" align="center">
      </el-table-column>
      <el-table-column prop="payoutsbalance" label="可提现余额" align="center">
      </el-table-column>
      <el-table-column prop="unpayoutsbalance" label="不可提现余额" align="center">
      </el-table-column>
      <el-table-column prop="isrealcertify" label="是否实名" align="center">
      </el-table-column>
      <el-table-column prop="onlinetime" label="最近在线时间" align="center">
      </el-table-column>
      <el-table-column prop="merchantcertify" label="商户认证" align="center">
      </el-table-column>
      <el-table-column prop="viprole" label="会员" align="center">
      </el-table-column>
      <el-table-column
          align="center"
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">


          <el-button type="text" size="small" @click="banned(scope.row)">封禁
          </el-button>
          <el-button type="text" size="small" @click="unbanned(scope.row)">解封
          </el-button>
        </template>

      </el-table-column>


    </el-table>
    <el-dialog
        title="提示"
        :visible.sync="dialogBannedVisible"
        width="30%"
    >
      <el-input v-model="bannedReason" placeholder="请输入封禁原因"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogBannedVisible = false">取 消</el-button>
    <el-button type="primary" @click="bannedSure">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
        title="提示"
        :visible.sync="dialogUnbannedVisible"
        width="30%"
    >
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogUnbannedVisible = false">取 消</el-button>
    <el-button type="primary" @click="unbannedSure">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import {users, banned, unbanned} from '@/api/api.js';

export default {
  data() {
    return {
      tableData: [],
      data: '',
      loading: false,
      bannedReason: '',
      dialogBannedVisible: false,
      dialogUnbannedVisible: false
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData(params) {
      users(params)
          .then(res => {
            console.log(res.data);
            this.tableData = res.data.data;
          })
    },
    banned(params) {
      this.dialogBannedVisible = true;
      this.data = params;
    },
    unbanned(params) {
      this.dialogUnbannedVisible = true;
      this.data = params;
    },
    bannedSure() {
      if (this.bannedReason === '') {
        alert("封禁原因为空!");
      } else {
        this.dialogBannedVisible = false;
        this.data.bannedReason = this.bannedReason;
        this.loading = true;
        banned(this.data)
            .then(res => {

              if (res.data.result === "成功") {
                console.log(res.data);

              } else {
                alert(res.data.result);
              }
              this.loading = false;
              this.tableData = res.data.data;
            })
      }

    },
    unbannedSure() {
      this.dialogUnbannedVisible = false;
      this.loading = true;
      unbanned(this.data)
          .then(res => {

            if (res.data.result === "成功") {
              console.log(res.data);

            } else {
              alert(res.data.result);
            }
            this.loading = false;
            this.tableData = res.data.data;
          })
    }


  }

}

</script>
<style lang="scss" scoped>
.users {

  margin-top: 20px;
}
</style>